<template>
  <div id="hitch-common-place-item">
    <div class="upper row between">
      <div class="row y-center">
        <md-icon class="flag-icon" :name="value.flag=='work'?'sbyc_icon':'xbyc_icon'"></md-icon>
        <div>{{value.desc}}</div>
      </div>
      <div class="row y-center" v-if="value.timeInfo">
        <md-icon class="time-icon" name="time"></md-icon>
        <div>{{value.timeInfo.text}}</div>
      </div>
    </div>
    <div class="lower row">
      <div class="position-info row">
        <svg :fill="value.flag=='work'?'#3F88EB':'#FF6917'" width="12" height="12">
          <circle cx="6" cy="6" r="3" />
        </svg>
        <div :class="value.flag=='work'?'blue':'orange'">{{value.flag=='work'?'家':'公司'}}</div>
        <div>{{value.startInfo.address.stationName}}</div>
      </div>
      <md-icon name="jiantou_icon" class="jiantou_icon"></md-icon>
      <div class="position-info row">
        <svg :fill="value.flag=='work'?'#FF6917':'#3F88EB'" width="12" height="12">
          <circle cx="6" cy="6" r="3" />
        </svg>
        <div :class="value.flag=='work'?'orange':'blue'">{{value.flag=='work'?'公司':'家'}}</div>
        <div>{{value.endInfo.address.stationName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/sbyc_icon.svg';
import '@/assets/svgs/xbyc_icon.svg';
import '@/assets/svgs/jiantou_icon.svg';
import '@/assets/svgs/time.svg';
import Moment from 'moment';
import { Icon } from 'mand-mobile';
export default {
  name: 'common-place-item',
  components: {
    [Icon.name]: Icon
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      timeString: ''
    };
  }
};
</script>

<style lang="stylus" scoped>
#hitch-common-place-item {
  background: #fff;
  box-shadow: 0px 2px 6px 0px rgba(218, 218, 218, 1);
  border-radius: 6px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 20px;
  height: 120px;
  color: #333;

  .upper {
    font-size: 26px;

    .y-center {
      align-items: center;
    }

    .flag-icon {
      width: 36px;
      height: 38px;
      margin-right: 20px;
    }

    .time-icon {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }

  .lower {
    font-size: 24px;
    align-items: center;
    margin-top: 10px;

    .jiantou_icon {
      width: 46px;
      height: 14px;
      margin: 0px 10px;
    }

    .orange {
      color: #FF6917;
      margin: 0px 10px;
    }

    .blue {
      color: #3F88EB;
      margin: 0px 10px;
    }

    .position-info {
      align-items: center;
    }
  }
}
</style>